import { defineComponent } from 'vue'
import './resetBlockSize.css'
export default defineComponent({
    props: {
        block: { type: Object },
        component: { type: Object },
        updateBlock: { type: Function }
    },
    setup(props) {
        const { width, height } = props.component.reSize || {}
        const data = {}
        const onmousemove = (e) => {
            let tempBlock = { ...props.block }
            let { startX, startY, startWidth, startHeight, direction, startLeft, startTop } = data

            let { clientX, clientY } = e

            console.log(direction, '>>>>>>>direction');

            if (direction.vertical‌ === 'center') {
                clientY = startY
            }
            if (direction.horizontal‌ === 'center') {
                clientX = startX
            }
            // 拖动的距离
            let durX = clientX - startX
            let durY = clientY - startY
            if (direction.horizontal‌ === 'start') {
                durX = -durX
                tempBlock.left = startLeft - durX
            }
            if (direction.vertical‌ === 'start') {
                durY = -durY
                tempBlock.top = startTop - durY
            }
            // 实际位置
            let durWidth = startWidth + durX
            let durHeight = startHeight + durY


            tempBlock.width = durWidth
            tempBlock.height = durHeight
            tempBlock.hasReSize = true
            if (durWidth < 0 || durHeight < 0) {
                return
            }
            props.updateBlock(tempBlock)
        }
        const onmouseup = () => {
            let tempBlock = { ...props.block }
            tempBlock.hasReSize = false
            props.updateBlock(tempBlock)
            document.removeEventListener('mousemove', onmousemove)
            document.removeEventListener('mouseup', onmouseup)
        }
        const onmousedown = (e, direction) => {
            // horizontal‌:'x',vertical‌: 'y'
            // 阻止冒泡
            e.stopPropagation()
            // 鼠标点击时 记录 原始 位置数据
            data.startX = e.clientX
            data.startY = e.clientY
            // 补丁1 如果有配置模式 则取配置模式的宽高
            if (props.block.config.width) {
                data.startWidth = props.block.config.width * 1
                data.startHeight = props.block.config.height * 1
            } else {
                data.startWidth = props.block.width
                data.startHeight = props.block.height
            }
            data.direction = direction
            data.startLeft = props.block.left
            data.startTop = props.block.top

            document.addEventListener('mousemove', onmousemove)
            document.addEventListener('mouseup', onmouseup)
        }

        return () => <>
            {width && <>
                <div class="reset-block-size reset-block-size-left" onmousedown={e => onmousedown(e, { horizontal‌: 'start', vertical‌: 'center' })}></div>
                <div class="reset-block-size reset-block-size-right" onmousedown={e => onmousedown(e, { horizontal‌: 'end', vertical‌: 'center' })}></div>
            </>}

            {height && <>
                <div class="reset-block-size reset-block-size-top" onmousedown={e => onmousedown(e, { horizontal‌: 'center', vertical‌: 'start' })}></div>
                <div class="reset-block-size reset-block-size-bottom" onmousedown={e => onmousedown(e, { horizontal‌: 'center', vertical‌: 'end' })}></div>
            </>}

            {height && width && <>
                <div class="reset-block-size reset-block-size-top-left" onmousedown={e => onmousedown(e, { horizontal‌: 'start', vertical‌: 'start' })}></div>
                <div class="reset-block-size reset-block-size-top-right" onmousedown={e => onmousedown(e, { horizontal‌: 'end', vertical‌: 'start' })}></div>
                <div class="reset-block-size reset-block-size-bottom-left" onmousedown={e => onmousedown(e, { horizontal‌: 'start', vertical‌: 'start' })}></div>
                <div class="reset-block-size reset-block-size-bottom-right" onmousedown={e => onmousedown(e, { horizontal‌: 'end', vertical‌: 'end' })}></div>
            </>}

        </>
    }
})